<script setup lang="ts" name="SubMenu">
import type { RouteRecordRaw } from 'vue-router'
import { useLayoutConfigStore } from '@/store/layoutConfig'

defineProps<{
  menu: RouteRecordRaw
}>();

const layoutConfig = useLayoutConfigStore()
function handelMenu(val: any) {
  console.log('handelMenu', val);
  layoutConfig.selectMenu(val)
}
</script>

<template>
  <el-menu-item v-if="!menu.children || menu.children.length <= 0" :index="menu.path" @click="handelMenu(menu)">
    <!-- <component class="icons" :is="menu.meta?.icon"></component> -->
    <SvgIcon width="16" height="16" :name="menu.meta?.icon"></SvgIcon>
    <template #title>
      <span class="aside-title">{{ menu.meta?.title }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu v-else :index="menu.path">
    <template #title>
      <!-- <component class="icons" :is="menu.meta?.icon"></component> -->
      <SvgIcon width="16" height="16" :name="menu.meta?.icon"></SvgIcon>
      <span class="aside-title">{{ menu.meta?.title }}</span>
    </template>
    <SubMenu v-for="childMenu in menu.children" :menu="childMenu" :key="childMenu.path" />
  </el-sub-menu>
</template>

<style scoped lang="scss"></style>